<script setup>
import headerBar from '@/components/header/index.vue'
import footerBar from '@/components/footer/index.vue'
import titleBar from './title_bar.vue'
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getData } from '@/utils/util'
import { checkPhone, isEmailAvailable } from '@/utils/validate'
const router = useRouter();
import {
    modify, subscriptionlist, studyprogress,
    studyhistory, informationcollectlist, studyhonor,
    studyprogressinfo
} from '@/api/pms';
import { getToken } from '@/utils/auth';
import { informationhotlist, informationcollect } from '@/api/info';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const userInfo = ref(null);
const ruleFormRef = ref('');
const baseFlag = ref(false);
const wenjuanFlag = ref(false);
const dingyueFlag = ref(false);
const getinformationhotlistList = ref([]);
const paperlistList = ref([]);
const studyprogressList = ref([]);
const studyhistoryList = ref([]);
const informationcollectlistList = ref([]);
const studyhonorList = ref([]);
const uploadUrl = process.env.VITE_APP_BASE_API + 'api/catapp/file/upload/';
import defautAvatar from '@/assets/images/avatar.png';
const studyLineIndex = ref(null);
const ruleForm = reactive({
    "name": '',
    "birthday": null,
    "career": "",
    "education": "",
    "email": "",
    "gender": null,
    "industry": "",
    "practice": "",
    "telephone": "",
    "title": "",
    "workunit": ""
})
const validatePhone = (rule, value, callback) => {
    if (value === '' || !checkPhone(value)) {
        callback(new Error('请输入正确的手机号！'))
    } else {
        callback()
    }
}
const validateEmail = (rule, value, callback) => {
    if (value === '' || !isEmailAvailable(value)) {
        callback(new Error('请输入正确的邮箱！'))
    } else {
        callback()
    }
}
const rules = reactive({
    name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
    birthday: [{ required: true, message: '请选择生日', trigger: 'blur' }],
    career: [{ required: true, message: '请填写现职', trigger: 'blur' }],
    education: [{ required: true, message: '请填写学历', trigger: 'blur' }],
    email: [{ validator: validateEmail, message: '请填写邮箱', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    industry: [{ required: true, message: '请填写行业', trigger: 'blur' }],
    practice: [{ required: true, message: '请填写从业', trigger: 'blur' }],
    telephone: [{ validator: validatePhone, message: '请填写电话', trigger: 'blur' }],
    title: [{ required: true, message: '请填写职称', trigger: 'blur' }],
    workunit: [{ required: true, message: '请填写单位', trigger: 'blur' }],
})
const options = [{
    value: 1,
    label: '男',
}, {
    value: 2,
    label: '女',
}]
const getInfo = () => {
    
    if (userStore.userInfo) {
        userInfo.value = userStore.userInfo;
        ruleForm.name = userStore.userInfo.name;
        ruleForm.birthday = userStore.userInfo.birthday;
        ruleForm.career = userStore.userInfo.career;
        ruleForm.education = userStore.userInfo.education;
        ruleForm.email = userStore.userInfo.email;
        ruleForm.gender = userStore.userInfo.gender;
        ruleForm.industry = userStore.userInfo.industry;
        ruleForm.practice = userStore.userInfo.practice;
        ruleForm.telephone = userStore.userInfo.telephone;
        ruleForm.title = userStore.userInfo.title;
        ruleForm.workunit = userStore.userInfo.workunit;
    } else {
        userStore.getInfo().then(res => {
            userInfo.value = res;
            ruleForm.name = res.name;
            ruleForm.birthday = res.birthday;
            ruleForm.career = res.career;
            ruleForm.education = res.education;
            ruleForm.email = res.email;
            ruleForm.gender = res.gender;
            ruleForm.industry = res.industry;
            ruleForm.practice = res.practice;
            ruleForm.telephone = res.telephone;
            ruleForm.title = res.title;
            ruleForm.workunit = res.workunit;
        })
    }
}
getInfo()
const save = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            ruleForm.birthday = Number(ruleForm.birthday)
            let params = {
                "data": ruleForm,
                "token": getToken(),
            }
            modify(params).then(res => {
                if (res.code === 0) {
                    ElMessage({
                        message: '保存成功',
                        type: 'success',
                    })
                    userStore.getInfo().then(res => {
                        userInfo.value = res;
                        ruleForm.name = res.name;
                        ruleForm.birthday = res.birthday;
                        ruleForm.career = res.career;
                        ruleForm.education = res.education;
                        ruleForm.email = res.email;
                        ruleForm.gender = res.gender;
                        ruleForm.industry = res.industry;
                        ruleForm.practice = res.practice;
                        ruleForm.telephone = res.telephone;
                        ruleForm.title = res.title;
                        ruleForm.workunit = res.workunit;
                    })
                }
                console.log(res)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const getinformationhotlist = () => {
    let params = {
        "data": {
            "pagesize": 10000,
            "pagestart": 0
        }
    }
    informationhotlist(params).then(res => {
        console.log(res);
        getinformationhotlistList.value = res.data.informationlist;
    })
}
getinformationhotlist();
//订阅管理
const getpaperlist = () => {
    let params = {
        "data": {}
    }
    subscriptionlist(params).then(res => {
        paperlistList.value = res.data.subscriptionlist;
        console.log(res);
    })
}
getpaperlist();
//学习路线
const getstudyprogress = () => {
    let params = {
        "data": {}
    }
    studyprogress(params).then(res => {
        studyprogressList.value = res.data.studylist;
        console.log(res);
    })
}
getstudyprogress();
//学习轨迹
const getstudyhistory = () => {
    let params = {
        "data": {}
    }
    studyhistory(params).then(res => {
        studyhistoryList.value = res.data.studyhistorylist;
        console.log(res);
    })
}
getstudyhistory();
//已收藏
const getinformationcollectlist = () => {
    let params = {
        "data": {}
    }
    informationcollectlist(params).then(res => {
        informationcollectlistList.value = res.data.collectlist;
        console.log(res);
    })
}
getinformationcollectlist();
//顶部的成就内容
const getstudyhonor = () => {
    let params = {
        "data": {}
    }
    studyhonor(params).then(res => {
        studyhonorList.value = res.data.honorinfolist;
        console.log(res);
    })
}
getstudyhonor();
const jumpDetail = (obj) => {
    router.push({
        path: '/detail',
        query: {
            id: obj.informationid
        }
    })
}
const handleAvatarSuccess = (response, uploadFile) => {
    console.log(response)
    userInfo.value.user_head = response.data.full_path;
    ruleForm.birthday = Number(ruleForm.birthday)
    let params = {
        data: ruleForm,
    }
    params.data.user_head = userInfo.value.user_head;
    modify(params).then(res => {
        if (res.code === 0) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
        }
    })
}
const handleAvatarError = (err, uploadFile) => {
    console.log(err)
}
const loading = ref(false)
const getstudyprogressinfo = (obj, index) => {
    if (studyLineIndex.value === index) {
        studyLineIndex.value = null;
    } else {
        studyLineIndex.value = index;
    }
    if (studyprogressList.value[index].detail) {
        return;
    } else {
        loading.value = true;
        let params = {
            "data": {
                "studyid": obj.studyid
            }
        }
        studyprogressinfo(params).then(res => {
            loading.value = false;
            studyprogressList.value[index].detail = res.data.studyhistorylist;
        })
    }
}
const deleteCollect = (informationid) => {
    let params = {
        "data": {
            "informationid": Number(informationid),
            "iscollect": 0
        }
    }
    informationcollect(params).then(res => {
        if (res.code === 0) {
            ElMessage({
                showClose: true,
                message: '操作成功！',
                type: 'success',
            })
            getinformationcollectlist();
        } else {
            ElMessage({
                showClose: true,
                message: res.message,
                type: 'warning',
            })
        }

    }).catch(err => {
        console.log(err);
    })
}
const dialogVisible = ref(false);
const editorNikenameTxt = ref('');
const editorNikename = () => {
    dialogVisible.value = true;
    editorNikenameTxt.value = userInfo.value.user_name;
}
//saveNikename
const saveNikename = () => {
    ruleForm.birthday = Number(ruleForm.birthday)
    let params = {
        data: ruleForm,
    }
    params.data.nickname = editorNikenameTxt.value;
    modify(params).then(res => {
        dialogVisible.value = false;
        if (res.code === 0) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            userStore.getInfo().then(res => {
                userInfo.value = res;
            })
        }
    })

}
</script>
<template>
    <div class="container">
        <header-bar :index="3"></header-bar>
        <div class="module-container">
            <div class="info">
                <div class="user-info-left">
                    <div class="avatar">
                        <el-upload class="avatar-uploader" :action="uploadUrl"
                            :data="{ 'data': {}, 'token': getToken() }" :show-file-list="false"
                            :on-success="handleAvatarSuccess" :on-error="handleAvatarError">
                            <!-- <el-avatar :size="200" :src="userInfo?.user_head" icon="UserFilled" /> -->
                            <img :src="userInfo?.user_head ? userInfo?.user_head : defautAvatar" class="avatar" />
                        </el-upload>
                        <!-- <img src="../../assets/images/avatar.png" alt=""> -->
                    </div>
                    <div class="user-info">
                        <div class="user-name">
                            <i class="user-name-icon"></i>
                            <span>{{ userInfo?.user_name }}</span>
                            <i class="user-name-editor" @click="editorNikename"></i>
                        </div>
                        <div class="user-phone">
                            <i></i>
                            <span>{{ userInfo?.telephone }}</span>
                        </div>
                    </div>
                </div>
                <div class="user-info-right">
                    <div class="user-info-right-name">
                        欢迎您，<span>{{ userInfo?.user_name }}同学！</span>
                    </div>
                    <div class="user-info-right-chengjiu">
                        <div v-for="(item, index) in studyhonorList" :key="index">
                            <div class="user-info-right-chengjiu-item" v-if="item.honortype === 1">
                                看到您获得了<span>{{ item.count }}</span>项成就，学名<span>{{ item.honorname }}</span>；
                            </div>
                            <div class="user-info-right-chengjiu-item" v-if="item.honortype === 2">
                                看到您学习了<span>{{ item.count }}</span>学时，称得上<span>{{ item.honorname }}</span>；
                            </div>
                            <div class="user-info-right-chengjiu-item" v-if="item.honortype === 3">
                                看到您启动完成了<span>{{ item.count }}</span>个岗位的学习，职业生涯必将<span>{{ item.honorname }}</span>；
                            </div>
                            <div class="user-info-right-chengjiu-item" v-if="item.honortype === 4">
                                <!-- 看到您发表了180篇互动，在学友中已成为人师世范； -->
                                看到您发表了<span>{{ item.count }}</span>项成就，学名<span>{{ item.honorname }}</span>；
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="content">
                <div class="content-left">
                    <div class="user-info-modify">
                        <titleBar name="基本信息" :is-show="baseFlag" tip="基本信息"></titleBar>
                        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                            label-width="auto" class="ruleForm">
                            <el-form-item label="姓名：" prop="name">
                                <el-input v-model="ruleForm.name" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="性别：" prop="gender">
                                <el-select v-model="ruleForm.gender" popper-class="mars-select"
                                    :popper-append-to-body="false" placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生日：" prop="birthday">
                                <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="请选择"
                                    format="YYYY/MM/DD" value-format="X" />
                            </el-form-item>
                            <el-form-item label="电话：" prop="telephone">
                                <el-input v-model="ruleForm.telephone" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="邮箱：" prop="email">
                                <el-input v-model="ruleForm.email" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="行业：" prop="industry">
                                <el-input v-model="ruleForm.industry" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="单位：" prop="workunit">
                                <el-input v-model="ruleForm.workunit" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="现职：" prop="career">
                                <el-input v-model="ruleForm.career" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="学历：" prop="education">
                                <el-input v-model="ruleForm.education" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="职称：" prop="title">
                                <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item label="从业：" prop="practice">
                                <el-input v-model="ruleForm.practice" type="text" autocomplete="off" />
                            </el-form-item>
                            <el-form-item>
                                <el-button class="save" type="primary" round @click="save(ruleFormRef)">
                                    保存
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="wenjuan">
                        <titleBar name="调研问卷" :is-show="wenjuanFlag" tip="调研问卷"></titleBar>
                        <div class="wenjuan-list">
                            <div class="wenjuan-item">QSwell标准文件</div>
                            <div class="wenjuan-item">O*NET工作环境问卷……</div>
                        </div>
                    </div>
                    <div class="dingyue">
                        <titleBar name="订阅管理" :is-show="dingyueFlag" tip="订阅管理"></titleBar>
                        <div class="dingyue-list">
                            <div class="dingyue-item" v-for="(item, index) in paperlistList" :key="index">
                                {{ item.papername }}
                                <span>{{ item.recordname }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="study">
                        <titleBar name="学习路线图" :is-show="studyFlag" tip="学习路线图"></titleBar>
                        <div class="study-tip">
                            <span class="defaut">您已经点亮了</span>
                            <span class="study-active">3</span>
                            <span class="defaut">个学习路线图，已完成度分别为：</span>
                            <span class="study-active">A</span>
                            <span class="defaut">学习路线图</span>
                            <span class="study-active">68%</span>
                            <span class="defaut">；</span> <span class="text_96">B</span>
                            <span class="defaut">学习路线图</span>
                            <span class="study-active">78%</span>
                            <span class="defaut">；</span> <span class="text_100">C</span>
                            <span class="defaut">学习路线图</span>
                            <span class="study-active">100%</span>
                            <span class="defaut">。</span>
                        </div>
                        <div class="study-list">
                            <div class="study-item" v-for="(item, index) in studyprogressList" :key="index">
                                <div class="study-item-title" @click="getstudyprogressinfo(item, index)">
                                    <i :class="[{ 'study-item-title-icon-ishow': index === studyLineIndex }]"></i>
                                    <div class="study-item-title-text">
                                        学习路线图：
                                        <span>{{ item.studyname }}（完成度{{ item.progress }}%）</span>
                                    </div>
                                </div>
                                <div class="study-item-content" v-loading="loading" v-show="index === studyLineIndex">
                                    <div class="study-item-content-item" v-for="(item, index) in item.detail"
                                        :key="index">
                                        {{ getData(item.studytime) }}，学习了
                                        <span>{{ item.informationName }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="study">
                        <titleBar name="学习轨迹" :is-show="studyFlag" tip="学习轨迹"></titleBar>
                        <div class="study-tip">
                            您已经投入了<span class="study-active">3</span>学时，
                            学习完成了<span class="study-active">3</span>个课程，
                            正在学习<span class="study-active">3</span>个课程，
                            因为感兴趣收藏了<span class="study-active">3</span>篇各类东东。
                        </div>
                        <div class="study-list">
                            <div class="study-item">
                                <div class="study-item-title">
                                    <i></i>
                                    <div class="study-item-title-text">
                                        <span>课程</span>
                                    </div>
                                </div>
                                <div class="study-item-content">
                                    <div class="study-item-content-item" v-for="(item, index) in studyhistoryList"
                                        :key="index">
                                        {{ getData(item.studytime) }}，学习了
                                        <span>{{ item.informationName }}</span>
                                        <span class="status">已完成</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="study">
                        <titleBar name="已收藏" :is-show="studyFlag" tip="已收藏"></titleBar>
                        <div class="study-list">
                            <div class="study-item">
                                <div class="study-item-content">
                                    <div class="study-item-content-item"
                                        v-for="(item, index) in informationcollectlistList" :key="index">
                                        {{ getData(item.collecttime) }}，学习了
                                        <span>{{ item.informationname }}</span>
                                        <i class="delete" @click="deleteCollect(item.informationid)"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="study">
                        <titleBar name="学习成就" :is-show="studyFlag" tip="学习成就"></titleBar>
                        <div class="study-tip">
                            您已经投入了<span class="study-active">3</span>学时，
                            学习完成了<span class="study-active">3</span>个课程，
                            正在学习<span class="study-active">3</span>个课程，
                            因为感兴趣收藏了<span class="study-active">3</span>篇各类东东。
                        </div>
                        <div class="study-list">
                            <div class="study-item">
                                <div class="study-item-title">
                                    <i></i>
                                    <div class="study-item-title-text">
                                        <span>学习成就</span>
                                    </div>
                                </div>
                                <div class="study-item-content">
                                    <div class="study-item-content-item">
                                        2023.10.13-21:30，获得成就：本周学习了30学时，查看
                                        <span>勋章</span>
                                    </div>
                                </div>
                            </div>
                            <div class="study-item">
                                <div class="study-item-title">
                                    <i></i>
                                    <div class="study-item-title-text">
                                        <span>成就计划</span>
                                    </div>
                                </div>
                                <div class="study-item-content">
                                    <div class="study-item-content-item">
                                        成就计划：
                                        <span>学时累积奖励计划</span>
                                    </div>
                                    <div class="study-item-content-item">
                                        成就计划：
                                        <span>学时累积奖励计划</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="study">
                        <titleBar name="学习互动" :is-show="studyFlag" tip="学习互动"></titleBar>
                        <div class="study-tip">
                            您已经投入了<span class="study-active">3</span>学时，
                            学习完成了<span class="study-active">3</span>个课程，
                            正在学习<span class="study-active">3</span>个课程，
                            因为感兴趣收藏了<span class="study-active">3</span>篇各类东东。
                        </div>
                        <div class="study-list">
                            <div class="study-item">
                                <div class="study-item-content">
                                    <div class="study-item-content-item">
                                        20240102-23:12，纪录笔记：
                                        <span>Mark01</span>
                                    </div>
                                </div>
                            </div>
                            <div class="study-item">
                                <div class="study-item-content">
                                    <div class="study-item-content-item">
                                        20240102-23:12，纪录笔记：
                                        <span>化妆品注册备案技巧……</span>
                                    </div>
                                </div>
                            </div>
                            <div class="study-item">
                                <div class="study-item-content">
                                    <div class="study-item-content-item">
                                        20240102-23:12，纪录笔记：
                                        <span>化妆品注册备案技巧……</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-right">
                    <div class="module-two-right-hot">
                        <div class="module-two-right-hot-title">相关学习路径</div>
                        <div class="module-two-right-hot-list">
                            <div class="module-two-right-hot-item" @click="jumpDetail(item)"
                                v-for="(item, index) in getinformationhotlistList" :key="index">
                                {{ index + 1 + '、' + item.informationname }}
                            </div>
                        </div>
                    </div>
                    <div class="module-two-right-hot">
                        <div class="module-two-right-hot-title">学习热度榜</div>
                        <div class="module-two-right-hot-list">
                            <div class="module-two-right-hot-item" @click="jumpDetail(item)"
                                v-for="(item, index) in getinformationhotlistList" :key="index">
                                {{ index + 1 + '、' + item.informationname }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <footer-bar></footer-bar>
    </div>
    <el-dialog v-model="dialogVisible" title="用户昵称" width="500">
        <el-input v-model="editorNikenameTxt" type="text" placeholder="请输入昵称" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveNikename">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.container {
    width: 100%;
    background: url(../../assets/images/pmsBg.png) repeat center center/100%;
}

.module-container {
    width: 1520px;
    margin: 0 auto 100px auto;
}

.user-info-left {
    display: flex;
    align-items: center;
}

.user-info-right {
    padding-left: 100px;
    margin-right: 50px;
    position: relative;

    &-name {
        font-family: MiSansVF_Semibold;
        font-size: 25px;
        color: #000000;

        span {
            font-size: 33px;
        }
    }

    &-chengjiu-item {
        font-family: MiSansVF_Medium;
        font-size: 16px;
        color: #000000;
        line-height: 24px;
        vertical-align: middle;
        margin-top: 7px;

        span {
            font-size: 20px;
            color: #FF5C34;
        }
    }
}

.user-info-right::after {
    display: block;
    content: '';
    width: 1px;
    height: 120px;
    background-color: rgba($color: #000000, $alpha: .25);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -50px;
}

.info {
    width: 1520px;
    height: 344px;
    background: #FFFFFF;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 100px;

    .avatar {
        width: 200px;
        height: 200px;
        margin-left: 75px;
        margin-right: 69px;

        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}

.user-name {
    display: flex;
    align-items: center;

    &-icon {
        display: block;
        width: 36px;
        height: 39px;
        background: url('../../assets/icons/user.png')no-repeat center center/100%;
    }

    span {
        font-family: MiSansVF_Medium;
        font-size: 30px;
        color: #000000;
        line-height: 39px;
        margin-left: 26px;
    }

    &-editor {
        display: block;
        width: 36px;
        height: 39px;
        background: url('../../assets/icons/editor.png')no-repeat center center/100%;
        margin-left: 26px;
    }
}

.user-phone {
    display: flex;
    align-items: center;
    margin-top: 20px;

    i {
        display: block;
        width: 41px;
        height: 39px;
        margin-right: 21px;
        background: url('../../assets/icons/phone.png')no-repeat center center/100%;
    }

    span {
        font-family: MiSansVF_Medium;
        font-size: 30px;
        color: #000000;
    }
}

.content {
    margin-top: 100px;
    display: flex;

    &-left {
        margin-right: 70px;
    }
}

.el-form {
    margin-top: 40px;
}

.user-info-modify {}

::v-deep(.el-checkbox) {
    display: block;
    height: 48px;
}

.mars-select {
    top: auto !important;
    left: auto !important;
}

.save {
    margin: 0 auto;
    background-color: #8145E5;
    border-color: #8145E5;
}

.wenjuan {
    margin-top: 140px;

    &-list {
        margin-top: 20px;
    }

    &-item {
        width: 650px;
        font-family: MiSansVF_Medium;
        font-size: 18px;
        color: #000000;
        line-height: 24px;
        text-align: left;
        font-style: normal;
        text-decoration-line: underline;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
    }
}

.dingyue {
    margin-top: 70px;

    &-list {
        margin-top: 20px;
    }

    &-item {
        margin-top: 20px;
        font-family: MiSansVF_Medium;
        font-size: 18px;
        color: rgba(0, 0, 0, 0.5);
        line-height: 24px;

        span {
            font-family: MiSansVF_Medium;
            font-size: 18px;
            color: #000000;
            line-height: 24px;
            text-decoration-line: underline;
        }
    }
}

.study {
    margin-top: 70px;

    &-tip {
        font-family: MiSansVF;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        line-height: 24px;
        margin-top: 20px;

        .study-active {
            color: #FF5C34;
        }
    }

    &-item {
        width: 1090px;
        margin-left: 15px;
        padding-left: 15px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.25);
        margin-top: 40px;
        padding-bottom: 20px;

        &-title {
            display: flex;
            align-items: center;
            cursor: pointer;

            i {
                display: block;
                width: 18px;
                height: 18px;
                margin-right: 15px;
                background: url('../../assets/icons/hide.png')no-repeat center center/100%;
            }

            i.study-item-title-icon-ishow {
                background: url('../../assets/icons/show.png')no-repeat center center/100%;
            }
        }

        &-title-text {
            font-family: MiSansVF_Medium;
            font-size: 18px;
            color: #898989;
            line-height: 24px;

            span {
                color: #000000;
            }
        }

        &-content {
            margin-top: 10px;

            &-item {
                margin-top: 20px;
                font-family: MiSansVF_Medium;
                font-size: 18px;
                color: rgba(0, 0, 0, 0.5);
                line-height: 24px;
                cursor: pointer;

                span {
                    color: #000000;
                    text-decoration-line: underline;
                }

                .status {
                    font-family: MiSansVF_Medium;
                    font-size: 18px;
                    color: #FF5C34;
                    line-height: 24px;
                    margin-left: 30px;
                    text-decoration-line: none;
                }

                .delete {
                    display: inline-block;
                    width: 16px;
                    height: 18px;
                    margin-left: 30px;
                    cursor: pointer;
                    background: url('../../assets/icons/delete.png')no-repeat center center/100%;
                }
            }
        }
    }
}

.module-two-right-hot {
    width: 344px;
    height: 688px;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 30px 46px;
    box-sizing: border-box;
    margin-top: 48px;

    &-title {
        font-family: MiSansVF_Medium;
        font-size: 24px;
        color: #000000;
        line-height: 32px;
        text-align: justify;
        padding-left: 45px;
        background: url(../../assets/icons/hot.png)no-repeat left center;
        background-size: 30px 36px;
    }

    &-list {
        height: 575px;
        margin-top: 8px;
        overflow-y: auto;
    }

    &-item {
        font-family: MiSansVF_Medium;
        font-size: 18px;
        color: #000000;
        line-height: 24px;
        text-align: justify;
        overflow: hidden;
        /* 确保超出容器的文本被裁剪 */
        white-space: nowrap;
        /* 确保文本在一行内显示 */
        text-overflow: ellipsis;
        /* 超出部分显示为省略号 */
        margin-top: 24px;
        cursor: pointer;
    }
}

.avatar-uploader {
    width: 100%;
    height: 100%;
}

::v-deep(.el-upload) {
    width: 100%;
    height: 100%;
}
</style>
